{% extends "base-mobile.jinja" %}

{% block pageclass %}sign{% endblock %}

{% block main %}
<div class="ui-a s-page">
	<div class="sp-sign" id="sp-sign">
		<form method="post">
			<input type="hidden" name="action" value="sign" />
			<input type="hidden" id="csrf" name="csrfmiddlewaretoken" value="{{csrf_token}}" />
			<ul>
				<li><label><span>邮箱：</span><input class="inp-text" type="text" id="ss-mail" name="mail" value="" /></label></li>
				<li><label><span>密码：</span><input class="inp-text" type="password" id="ss-pwd" name="pwd" value="" /></label></li>
			</ul>
			<a class="sp-getpwd" href="/u/getpasswd/" target="_blank">忘记密码</a>
			<a class="sp-btn" id="sps-login" href="javascript:;">登 录</a>
		</form>
		<h4><span>使用其它帐号登录</span></h4>
		<a href="{{weibo_auth_uri|replace('api.weibo.com', 'open.weibo.cn')|replace('/auth/sina/', '/auth/sina/%3Fsite%3Dmobile')}}&display=mobile&state={{next_page}}" class="ui-a auth auth-wb">通过新浪微博登录</a>
		<a href="{{qq_auth_uri|replace('/auth/qq/', '/auth/qq/%3Fsite%3Dmobile')}}&state={{next_page}}" class="ui-a auth auth-qq">通过腾讯QQ登录</a>
	</div>
	<div class="sp-join" id="sp-join">
		<form action="" method="post">
			<input type="hidden" name="action" value="join" />
			<input type="hidden" id="csrf" name="csrfmiddlewaretoken" value="{{csrf_token}}" />
            <input type="hidden" id="app-username" name="app_username" value="" />
            <input type="hidden" id="token" name="token" value="" />
            <input type="hidden" id="expires" name="expires" value="" />
            <input type="hidden" id="account-type" name="account_type" value="" />
            <input type="hidden" id="avatar" name="avatar" value="" />
            <input type="hidden" id="app-uid" name="app_uid" value="" />
            <ul>
            	<li>
                	<label>
                		<span>邮箱：</span>
                    	<input id="sj-email" data-reg="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$" class="inp-text" type="text" name="email" value="{{user_email}}" placeholder="请输入您的邮箱" />
                    </label>
                </li>
                <li>
                	<label>
                		<span>昵称：</span>
                    	<input id="sj-name" data-reg="^[^\s]{3,30}$" class="inp-text" type="text" name="username" value="" placeholder="请输入您的昵称" />
                    </label>
                </li>
            </ul>
            <a class="sp-btn" id="sps-join" href="javascript:;">确 定</a>
		</form>
	</div>
</div>
{% endblock %}

{% block script %}
<script>
$(function(){
	//还原保存的帐号
	$('#ss-mail').val(localStorage.getItem('mt-user-mail') || '');
	//获取焦点
	if($('#ss-mail').val() == ''){$('#ss-mail').focus();}else{$('#ss-pwd').focus();}
	//提交登录
	$('#sps-login').click(function(){
		var el = $(this);
		var isSubmit = el.data('isSubmit') || false;
		var mailEl = $('#ss-mail');
		var pwdEl = $('#ss-pwd')
		var mail = $.trim(mailEl.val());
		var pwd = pwdEl.val();

		if(isSubmit){return false;}
		if(mail == ''){mailEl.focus();return false;}
		if(pwd == ''){pwdEl.focus();return false;}

		el.data('isSubmit', true).html('登录中...');

		$.ajax({
	        type: 'POST',
	        url: '/u/ajax/sign',
	        data: el.parent().serialize(),
	        dataType:'json',
	        success: function(result){
	            if(result.error){
	            	alert(result.msg);
	            	mailEl.focus();
	                el.data('isSubmit', false).html('登录');
	            }else{
	            	//保存用户名**密码
	            	localStorage.setItem('mt-user-mail', mail);
	                window.location.href = '/';
	            }
	        }
	    });
	});

	var submitJoinForm = function(obj){
		var el = obj.el;
		var isSubmit = el.data('isSubmit') || false;

		if(isSubmit){return false;}

		isSubmit = false;
		el.html('处理中...');

		$.ajax({
	        type: 'POST',
	        url: '/u/ajax/join',
	        data: el.parent().serialize(),
	        dataType:'json',
	        success: function(result){
	            if(result.error){
	            	alert(result.msg);
	            	mailEl.focus();
	                el.data('isSubmit', false).html('登录');
	            }else{
	            	localStorage.removeItem('mt-user-data');
	            	//保存用户名**密码
	            	localStorage.setItem('mt-user-mail', $('#sj-email').val());
	                window.location.href = '/';
	            }
	        }
	    });
	};

	//
	var userData = localStorage.getItem('mt-user-data');
	if(userData){
		userData = JSON.parse(userData);
		$('#sp-sign').hide();
		$('#sp-join').show().prepend('<p>Hi, '+ userData.username +'，还差一步即可完成注册</p>');

		$('#app-username').val(userData.username);
		$('#token').val(userData.token);
		$('#expires').val(userData.expires);
		$('#account-type').val(userData.account_type);
		$('#avatar').val(userData.avatar);
		$('#sj-name').val(userData.username);
		$('#app-uid').val(userData.app_uid)
		$('#sj-email').focus();

		//提交注册
		$('#sps-join').click(function(){
			var el = $(this);
			var mailEl = $('#sj-email');
			var mailReg = new RegExp(mailEl.data('reg'));
			var userEl = $('#sj-name');
			var userReg = new RegExp(userEl.data('reg'));

			if(!mailReg.test(mailEl.val())){
				alert('请输入正确的邮箱');
				mailEl.focus();
				return false;
			}
			//判断邮箱是否重复
			$.getJSON('/u/ajax/checkuser/?email='+ mailEl.val(), function(result){
	            if(result.error){
	                alert('您的邮箱已经注册过婚礼时光了');
					mailEl.focus();
					return false;
	            }else{
	            	//校验昵称
	            	if(!userReg.test(userEl.val())){
			        	alert('请输入3位以上中文字符');
						userEl.focus();
						return false;
			        }
			        //判断昵称是否重复
					$.getJSON('/u/ajax/checkuser/?username='+ userEl.val(), function(result){
			            if(result.error){
			                alert('昵称已经存在');
							userEl.focus();
							return false;
			            }else{
			            	//提交表单
			            	submitJoinForm({el: el});
			            }
			        });
	            }
	        });
		});
	}
});
</script>
{% endblock %}